<template>
  <ul>
    <li :style="{opacity}">欢迎学习 Vue</li>
    <li>news001 <input type="text"></li>
    <li>news002 <input type="text"></li>
    <li>news003 <input type="text"></li>
  </ul>
</template>

<script>
  export default {
    name: 'News',
    data() {
      return {
        opacity: 1
      }
    },
    /*mounted() {
      this.timer = setInterval(() => {
        this.opacity -= 0.1
        if (this.opacity <= 0) {
          this.opacity = 1
        }
      }, 100)
    },
    beforeDestroy() {
      console.log('News即将被销毁')
      clearInterval(this.timer)
    }*/

    /* 激活 */
    activated() {
      console.log('News被激活')
      this.timer = setInterval(() => {
        this.opacity -= 0.1
        if (this.opacity <= 0) {
          this.opacity = 1
        }
      }, 100)
    },

    /* 失活 */
    deactivated() {
      console.log('News被失活')
      clearInterval(this.timer)
    }
  }
</script>

<style scoped>

</style>